<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/common::header">
    <meta charset="UTF-8">
</head>
<body>
<div class="x-body layui-anim layui-anim-up">
    <blockquote class="layui-elem-quote">欢迎管理员：
        <span class="x-red" id="username"></span><span id="datetime"></span></blockquote>
    <fieldset class="layui-elem-field">
        <legend>数据统计</legend>
        <div class="layui-field-box">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-carousel x-admin-carousel x-admin-backlog" lay-anim="" lay-indicator="inside"
                             lay-arrow="none" style="width: 100%; height: 90px;">
                            <div carousel-item="">
                                <ul class="layui-row layui-col-space10 layui-this">
                                    <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>房间总数</h3>
                                            <p>
                                                <cite id="roomCount">666</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>空床位</h3>
                                            <p>
                                                <cite id="emptyBedCount">999</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>住户人数</h3>
                                            <p>
                                                <cite id="userCount">999</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>逾期人数</h3>
                                            <p>
                                                <cite style="color:red;" id="overdueCount">999</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>未审核总数</h3>
                                            <p>
                                                <cite id="applyCount">67</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>报修待处理</h3>
                                            <p>
                                                <cite id="repairCount" style="color:orange;">999</cite></p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset class="layui-elem-field">

        <div style="width: 1600px;height: 450px;padding: 50px 0 0 50px"> <!-- 为ECharts准备一个具备大小（宽高）的DOM容器-->
            <div id="main" style='width:750px;height:400px;float: left'></div>
            <div id="flowmain" style='width:750px;height:400px;float: right'></div>
        </div>
    </fieldset>
</div>
</body>
<!--统计图-->
<script type="text/javascript" th:inline="none">
    /*第一个图表*/
    var mainContainer = document.getElementById('main'); //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
    /*var resizeMainContainer = function () {
        mainContainer.style.marginLeft = window.innerWidth * 0.11 +'px';
        mainContainer.style.width = window.innerWidth * 0.78 +'px';
        mainContainer.style.height = window.innerHeight * 0.52 +'px';
    }; //设置容器高宽
    resizeMainContainer();*/

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(mainContainer);

    $.ajax({
        type: "get",
        url: "/dangxia/analysis/getStuMoneyList",
        contentType: "application/json",
        data: "",
        dataType: "json",
        timeout: 8000,
        async: true,
        cache: true,
        success: function (dataAjax) {
            var dataChart0 = new Array();
            var dataChart1 = new Array();

            for (var i = 0; i < dataAjax.data.length; i++) {
                dataChart0.push(dataAjax.data[i].startTime);
                dataChart1.push(dataAjax.data[i].roomRent);

            }

            // 指定图表的配置项和数据
            var option = {
                color: ['red', 'black'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                title: {
                    text: '---学生租金统计---',
                    left: '35%',
                    top: '92%'
                },
                legend: {
                    top: '2%',
                    data: ['学生租金']
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {show: false},
                        data: dataChart0
                    }
                ],
                yAxis: [
                    {
                        name: '单位：元',
                        nameLocation: 'end',
                        type: 'value'
                    }
                ],
                series: [

                    {
                        name: '学生租金',
                        type: 'line',
                        data: dataChart1
                    }
                ]
            }

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    });

    /*第二个图 表 */

    var mainContainer1 = document.getElementById('flowmain'); //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
    /*var resizeMainContainer = function () {
        mainContainer.style.marginLeft = window.innerWidth * 0.11 +'px';
        mainContainer.style.width = window.innerWidth * 0.78 +'px';
        mainContainer.style.height = window.innerHeight * 0.52 +'px';
    }; //设置容器高宽
    resizeMainContainer();*/

    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(mainContainer1);

    $.ajax({
        type: "get",
        url: "/dangxia/statistics/getFlowrate",
        contentType: "application/json",
        data: "",
        dataType: "json",
        timeout: 8000,
        async: true,
        cache: true,
        success: function (dataAjax) {
            var dataChart0 = new Array();
            var dataChart1 = new Array();

            for (var i = 0; i < dataAjax.data.length; i++) {
                dataChart0.push(dataAjax.data[i].time);
                dataChart1.push(dataAjax.data[i].count);

            }

            // 指定图表的配置项和数据
            var option = {
                color: ['blue', 'black'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                title: {
                    text: '---当前年份学校学生入住情况---',
                    left: '35%',
                    top: '92%'
                },
                legend: {
                    top: '2%',
                    data: ['入住人数']
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {show: false},
                        data: dataChart0
                    }
                ],
                yAxis: [
                    {
                        name: '单位：个',
                        nameLocation: 'end',
                        type: 'value'
                    }
                ],
                series: [

                    {
                        name: '入住人数',
                        type: 'line',
                        data: dataChart1
                    }
                ]
            }

            // 使用刚指定的配置项和数据显示图表。
            myChart1.setOption(option);

        }
    });

</script>


<!--数据统计-->
<script type="text/javascript" th:inline="none">

    $.post("/dangxia/welcome/getCountInfo", function (data) {
        if (data.code == 0) {
            //用户总数
            $("#userCount").html(data.data.userCount);
            //逾期人数
            $("#overdueCount").html(data.data.overdueCount);
            //房间总数
            $("#roomCount").html(data.data.roomCount);
            //未审核总人数
            $("#applyCount").html(data.data.applyCount);
            //报修待处理
            $("#repairCount").html(data.data.repairCount);
            //空床位
            $("#emptyBedCount").html(data.data.emptyBedCount);
            $("#datetime").html("！当前时间:" + data.data.datetime);
        } else {
            layer.msg("加载失败");
            clearInterval(aaa);
        }
    });
    /*每间隔五秒刷新一次*/
    var aaa = setInterval(function () {
        $.post("/dangxia/welcome/getCountInfo", function (data) {
            if (data.code == 0) {
                //用户总数
                $("#userCount").html(data.data.userCount);
                //逾期人数
                $("#overdueCount").html(data.data.overdueCount);
                //房间总数
                $("#roomCount").html(data.data.roomCount);
                //空床位
                $("#emptyBedCount").html(data.data.emptyBedCount);
                //报修待处理
                $("#repairCount").html(data.data.repairCount);
                //空床位
                $("#emptyBedCount").html(data.data.emptyBedCount);
                //$("#datetime").html("！当前时间:" + data.data.datetime);
            } else {
                layer.msg("加载失败");
                clearInterval(aaa);
            }
        })
    }, 5000);

    var currentTime =setInterval(function () {
        $("#datetime").html("！当前时间:"+ new Date());
    },1000);


    //获得员工的姓名
    $.post("/dangxia/login/getEmployeeName", function (data) {
        if (data != null) {
            $("#username").html(data);
        }
    })
</script>
</html>